<%@ taglib prefix="s" uri="/struts-tags"%>
<%@page contentType="text/html;charset=UTF-8"%>

	<script type="text/javascript">
		// URL to call ajax
		var LIST_USER_URL   = "<s:url value='/account/accountAjax_SearchUser'/>";
		var ADD_USER_URL    = "<s:url value='/account/accountAjax_AddUser'/>";
		var UPDATE_USER_URL = "<s:url value='/account/accountAjax_UpdateUser'/>";
		var REMOVE_USER_URL = "<s:url value='/account/accountAjax_DeleteUser'/>";

		var url;
		function newUser(){
			$('#dlg').dialog('open').dialog('setTitle','New User');
			$(':input','#fm').not(':button, :submit, :reset').val('');
			
			url = ADD_USER_URL;
		}
		function editUser(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$('#dlg').dialog('open').dialog('setTitle','Edit User');
				$('#fm').form('load',row);
				url = UPDATE_USER_URL + '?userId='+row.userId;
			}
		}
		function saveUser(){
			$('#fm').form('submit',{
				url: url,
				onSubmit: function(){
					var valid = $(this).form('validate'); 
					if (valid) {
						$.messager.progress(); 
					}
					return valid;
				},
				success: function(result){
					$.messager.progress('close');
					var result = eval('('+result+')');
					if (result.successMessage != ''){
						$('#dlg').dialog('close');		// close the dialog
						$.messager.alert('Info', result.successMessage);
						$('#dg').datagrid('reload');	// reload the user data
					} else {
						$.messager.alert('Error', result.failMessage);
					}
				}
			});
		}
		function removeUser(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){
					if (r){
						$.post(REMOVE_USER_URL,{userId:row.userId},function(result){
							if (result.successMessage){
								$.messager.alert('Info', result.successMessage);
								$('#dg').datagrid('reload');	// reload the user data
							} else {
								$.messager.alert('Error', result.failMessage);
							}
						},'json');
					}
				});
			} else {
				$.messager.alert('Info', 'Please select one user');
			}
		}
		
		function doSearchUser() {  
		    $('#dg').datagrid('load',{ 
		    	'userInfo.email': $('#search_email').val(),
		    	'userInfo.groupCode': $('#search_selectedGroupCode').val()
		    });
		}
		
		$(document).ready(function() {
			
			$('#search_button').click(function(){
				doSearchUser();
			});
		});
		
		// extend the 'equals' rule for 'create user'
		$.extend($.fn.validatebox.defaults.rules, {
		    equals: {
		        validator: function(value,param){
		            return value == $(param[0]).val();
		        },
		        message: 'Confirm password does not match.'
		    }
		});
		
	</script>

<center>
	<h2>Security Module - Manage Users</h2>
</center>

<center>
	<form id="searchUserForm" method="post">
		<table width="90%">
			<tr>
				<td align="center" width="30%"><label>Email: </label></td>
				<td width="70%"><s:textfield type="text" name="userInfo.email" id="search_email" theme="simple" /></td>
			</tr>
			<tr>
				<td align="center" width="30%"><label style="width: 30%;display: block;" for=search_selectedGroupCode>Group: </label>
				</td>
				<td>
					<s:if test="groupInfoList.{groupName} != null">
						<s:select name="userInfo.groupCode" headerKey="" theme="simple"
							id="search_selectedGroupCode" headerValue="--- Select ---" key="groupCode"
							list="groupInfoList"	listKey="groupCode" listValue="groupName">
						</s:select>
					</s:if>
					<s:else>
						<s:select name="userInfo.groupCode" headerKey="" theme="simple"
							id="search_selectedGroupCode" headerValue="--- Select ---" key="groupCode"
							list="''">
						</s:select>
					</s:else>
				</td>
			</tr>
			<tr>
				<td width="30%">&nbsp;</td>
				<td width="70%">
					<a href="#" class="easyui-linkbutton" id="search_button">Search</a>
				</td>
			</tr>
	</table>
	</form>


	<table id="dg" title="User List" class="easyui-datagrid" style="width:850px;height:auto"
			toolbar="#toolbar" fitColumns="true"
			data-options="
				rownumbers:true,  
                singleSelect:true,  
                autoRowHeight:false,  
                pagination:true, 
                singleSelect: true,
				pageSize:50,
				url: LIST_USER_URL,
				loadFilter: function(data) {
					if (data.userInfoList !== null && data.userInfoList !== undefined) {
						return {rows: data.userInfoList, total: data.pagingInfo.total}
					} else {
						return {rows: [], total: 0}
					}					
				},
				method: 'post'
			">
		<thead>
			<tr>
				<th data-options="field:'userId',hidden:true"></th>
				<th data-options="field:'email',width:200">Email</th>
				<th data-options="field:'displayEnabled',width:200">Enabled</th>
				<th data-options="field:'displayLocked',width:200">Locked</th>
				<th data-options="field:'displayCreatedDate',width:200">Joined Date</th>
			</tr>
		</thead>
	</table>
	<div id="toolbar">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Remove User</a>
	</div>
</center>

	<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
			closed="true" buttons="#dlg-buttons">
		<form id="fm" method="post" novalidate>

			<div class="fitem">
				<label for="groupInfoList">Select Group: </label>
				<s:if test="groupInfoList.{groupName} != null">
					<s:select name="groupCode" headerKey="" theme="simple" cssClass="easyui-validatebox" required="true"
						id="selectedParentCode" headerValue="--- Select ---" key="groupCode"
						list="groupInfoList"	listKey="groupCode" listValue="groupName">
					</s:select>
				</s:if>
				<s:else>
					<s:select name="groupCode" headerKey="" theme="simple"
						id="selectedParentCode" headerValue="--- Select ---" key="groupCode"
						list="''">
					</s:select>
				</s:else>
			</div>

			<div class="fitem">
				<label>Email:</label>
				<input name="email" class="easyui-validatebox" required="true" validType="email">
			</div>

			<div class="fitem">
				<label>Password:</label>
				<input name="password" class="easyui-validatebox" required="true" type="password" id="dgl_password">
			</div>
			
			<div class="fitem">
				<label>Confirm Pwd:</label>
				<input name="passwordVer" class="easyui-validatebox" required="true" type="password" validType="equals['#dgl_password']">
			</div>

		</form>
	</div>
	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
	</div>
